<template>
  <div id="Project" class="shadow-box">
    <!-- 头部搜索框 -->
    <div class="filter">
      <el-form ref="filterFormRef" :model="filter.form" inline>
        <el-form-item label="启用状态">
          <el-select v-model="filter.form.frozen">
            <el-option v-for="frozen in filter.status.frozen" :key="frozen.code" :value="frozen.type" :label="frozen.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="查找类型">
          <el-select v-model="filter.form.type" @change="searchTypeChange">
            <el-option v-for="type in filter.status.type" :key="type.code" :value="type.type" :label="type.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="filter.form.type !== '' && filter.form.type !== 'role'">
          <el-input type="text" v-model="filter.form.searchText" placeholder="请输入关键字"></el-input>
        </el-form-item>
        <el-form-item v-if="filter.form.type === 'role'">
          <el-select v-model="filter.form.searchText">
            <el-option v-for="type in $store.state.userRole" :key="type.code" :value="type.code" :label="type.name" :disabled="type.disabled"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getData">查找</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-plus" @click="showDialog('add')">添加员工</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 人员列表 -->
    <div class="list">
      <div class="title">员工列表</div>
      <div class="table">
        <el-table :data="result.list" border stripe>
          <el-table-column label="岗位" prop="role">
            <template slot-scope="scope">
              <el-tag effect="dark" :type="role.type" v-for="role in $store.state.userRole" :key="role.code" v-show="scope.row.role === role.code">{{ role.name }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="工号" prop="jobNum"></el-table-column>
          <el-table-column label="姓名" prop="name"></el-table-column>
          <el-table-column label="昵称" prop="nickName"></el-table-column>
          <el-table-column label="手机号" prop="phone"></el-table-column>
          <el-table-column label="公司" prop="companyName"></el-table-column>
          <el-table-column label="邮箱" prop="email"></el-table-column>
          <el-table-column label="是否冻结账户">
            <template slot-scope="scope">
              <el-tag type="success" v-if="!scope.row.frozen">未冻结</el-tag>
              <el-tag type="danger" v-else>已冻结</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="250px">
            <template slot-scope="scope">
              <el-button type="warning" @click="showDialog('mod', scope.row)">修改</el-button>
              <el-button type="danger" @click="showDialog('lock', scope.row)">冻结</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination
          @size-change="getData"
          @current-change="getData"
          :current-page.sync="page.pageNo"
          :page-size="page.pageSize"
          layout="total, prev, pager, next, jumper"
          :total="page.totalSize"
          background
        >
        </el-pagination>
      </div>
    </div>

    <el-dialog title="录入信息" :visible.sync="visible.staff.add" width="30%">
      <el-form ref="staffAdd" :model="form.staff.add" :rules="rules.staff" label-width="80px" label-position="left">
        <el-form-item label="姓名" prop="name">
          <el-input type="text" v-model="form.staff.add.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="nickName">
          <el-input type="text" v-model="form.staff.add.nickName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="岗位" prop="role">
          <el-select v-model="form.staff.add.role" placeholder="请选择员工岗位" style="width: 100%">
            <el-option v-for="role in $store.state.userRole" :key="role.code" :label="role.name" :value="role.code" :disabled="role.disabled"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工号" prop="jobNum">
          <el-input type="text" v-model="form.staff.add.jobNum" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="公司" prop="companyName">
          <div style="position: relative">
            <!-- @blur="companys = null" -->
            <el-input type="text" v-model="form.staff.add.companyName" autocomplete="off" placeholder="点击选择公司" :readonly="true" @focus="selectCompanyClick"> </el-input>
          </div>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input type="text" v-model="form.staff.add.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input type="text" v-model="form.staff.add.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="form.staff.add.password" autocomplete="off" show-password></el-input>
        </el-form-item>
        <el-form-item label="是否冻结">
          <el-switch type="password" v-model="form.staff.add.frozen" autocomplete="off"></el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancle('add')">取 消</el-button>
        <el-button type="primary" @click="addStaff">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="修改信息" :visible.sync="visible.staff.mod" width="30%">
      <el-form ref="staffMod" :model="form.staff.mod" :rules="rules.staff" label-width="80px" label-position="left">
        <el-form-item label="姓名" prop="name">
          <el-input type="text" v-model="form.staff.mod.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="nickName">
          <el-input type="text" v-model="form.staff.mod.nickName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="岗位" prop="role">
          <el-select v-model="form.staff.mod.role" placeholder="请选择员工岗位" style="width: 100%">
            <el-option v-for="role in $store.state.userRole" :key="role.code" :label="role.name" :value="role.code" :disabled="role.disabled"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工号" prop="jobNum">
          <el-input type="text" v-model="form.staff.mod.jobNum" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="公司" prop="companyName">
          <div style="position: relative">
            <el-input type="text" v-model="form.staff.mod.companyName" autocomplete="off" placeholder="点击选择公司" :readonly="true" @focus="selectCompanyClick"> </el-input>
          </div>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input type="text" v-model="form.staff.mod.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input type="text" v-model="form.staff.mod.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="text" v-model="form.staff.mod.password" autocomplete="off" placeholder="请在需要修改时填写"></el-input>
        </el-form-item>
        <!-- <el-form-item label="是否冻结">
          <el-switch type="password" v-model="form.staff.mod.frozen" autocomplete="off"></el-switch>
        </el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancle('mod')">取 消</el-button>
        <el-button type="primary" @click="updateStaff">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="提示" :visible.sync="visible.staff.lock" width="20%">
      <span>您确定冻结该用户吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancle('lock')">取 消</el-button>
        <el-button type="primary" @click="lockStaff()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 选择公司弹出框 -->
    <el-dialog title="选择公司" @open="selectCompanyOpen" :visible.sync="visible.selectCompany" width="70%">
      <div>
        <section>
          <el-form ref="queryForm" :model="query" inline label-width="80px">
            <el-form-item label="搜索方式">
              <el-select v-model="query.query_type">
                <el-option v-for="(item, index) in query.query_items" :key="index" :value="item.value" :label="item.txt"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="搜索字段" v-show="query.query_type != null">
              <el-input v-model="query.query_txt"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="queryCompany__">查找</el-button>
            </el-form-item>
          </el-form>
        </section>
        <section v-infinite-scroll="companysQuery" infinite-scroll-delay="300">
          <el-table :data="companys" :highlight-current-row="true" border stripe :show-header="false" @row-click="companysRowClick">
            <el-table-column align="center" label="公司名称" prop="companyName"></el-table-column>
          </el-table>
        </section>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible.selectCompany = false">取 消</el-button>
        <el-button type="primary" @click="confirmSelectCompany">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { checkPhone, checkEmail } from '../../utils/validate'
import { getStaffData, addStaff, updateStaff, lockStaff, queryCompany } from '../../api/staff/index'
export default {
  name: 'Project',
  data() {
    return {
      page: {
        pageSize: 10,
        pageNo: 1,
        totalSize: 0,
      },
      filter: {
        status: {
          frozen: [
            { code: null, type: -1, name: '全部' },
            { code: 0, type: 1, name: '已冻结' },
            { code: 1, type: 0, name: '未冻结' },
          ],
          type: [
            { code: null, type: '', name: '全部' },
            { code: 0, type: 'jobNum', name: '工号' },
            { code: 1, type: 'name', name: '姓名' },
            { code: 2, type: 'nickName', name: '昵称' },
            { code: 3, type: 'phone', name: '手机号' },
            { code: 4, type: 'email', name: '邮箱' },
            { code: 5, type: 'role', name: '岗位' },
          ],
        },
        form: {
          frozen: -1,
          type: '',
          searchText: '',
        },
      },
      result: {
        list: [],
      },
      visible: {
        staff: {
          add: false,
          mod: false,
          lock: false,
        },
        selectCompany: false,
      },
      form: {
        staff: {
          add: {
            name: '',
            nickName: '',
            jobNum: '',
            phone: '',
            email: '',
            companyName: '',
            companyId: '',
            password: '',
            role: '',
            frozen: false,
          },
          mod: {
            id: '',
            name: '',
            nickName: '',
            jobNum: '',
            phone: '',
            companyName: '',
            companyId: '',
            email: '',
            role: '',
            frozen: false,
          },
          lock: {
            id: '',
            name: '',
            nickName: '',
            jobNum: '',
            phone: '',
            companyName: '',
            companyId: '',
            email: '',
            role: '',
            frozen: false,
          },
        },
      },
      rules: {
        staff: {
          name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
          nickName: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
          jobNum: [{ required: true, message: '请输入工号', trigger: 'blur' }],
          companyName: [{ required: true, message: '请选择公司', trigger: ['blur', 'change'] }],
          email: [
            { validator: checkEmail, trigger: 'blur' },
            { required: true, message: '请输入邮箱', trigger: 'blur' },
          ],
          phone: [
            { validator: checkPhone, trigger: 'blur' },
            { required: true, message: '请输入手机号', trigger: 'blur' },
          ],
          // password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
          role: [{ required: true, message: '请选择员工职位', trigger: 'blur' }],
        },
      },
      // 公司列表
      companys: [],
      companysPage: 1,
      query: {
        query_type: 'companyName',
        query_items: [
          { txt: '公司名称', value: 'companyName' },
          { txt: '负责人', value: 'leader' },
          { txt: '联系电话', value: 'phone' },
          { txt: '邮箱', value: 'email' },
          { txt: '描述', value: 'remark' },
        ],
        query_txt: '',
      },
      selectCompanysItem: null,
    }
  },
  methods: {
    searchTypeChange() {
      this.filter.form.searchText = ''
    },
    getData() {
      getStaffData({
        page: {
          pageSize: this.page.pageSize,
          pageIndex: this.page.pageNo,
        },
        parameters: {
          frozenStatus: this.filter.form.frozen,
          [this.filter.form.type === '' ? undefined : this.filter.form.type]: this.filter.form.searchText === '' ? '' : this.filter.form.searchText,
        },
      }).then(
        data => {
          if (data.result === 0) {
            this.result.list = data.resultContent.userList
            this.page.totalSize = data.resultContent.totalSize
          } else {
            this.$message.error(`${data.describe}，错误码：${data.result}`)
          }
        },
        error => {
          throw error
        }
      )
    },
    showDialog(mode, info) {
      this.visible.staff[mode] = true
      if (mode === 'add') {
        this.form.staff[mode].password = '123456'
      }
      if (info) {
        Object.keys(this.form.staff[mode]).forEach(key => {
          this.form.staff[mode][key] = info[key]
        })
      }
    },
    addStaff() {
      this.$refs.staffAdd.validate(valid => {
        if (valid) {
          addStaff({ parameters: this.form.staff.add }).then(
            data => {
              if (data.result === 0) {
                this.$message.success(`录入成功`)
                this.cancle('add')
                this.getData()
              } else {
                this.$message.error(`${data.describe}，错误码：${data.result}`)
              }
            },
            error => {
              throw error
            }
          )
        }
      })
    },
    updateStaff() {
      this.$refs.staffMod.validate(valid => {
        if (valid) {
          updateStaff({ parameters: this.form.staff.mod }).then(
            data => {
              if (data.result === 0) {
                this.$message.success(`修改成功`)
                this.cancle('mod')
                this.getData()
              } else {
                this.$message.error(`${data.describe}，错误码：${data.result}`)
              }
            },
            error => {
              throw error
            }
          )
        }
      })
    },
    lockStaff() {
      lockStaff({ parameters: { id: this.form.staff.lock.id, frozen: true } }).then(
        data => {
          if (data.result === 0) {
            this.$message.success(`用户冻结成功`)
            this.cancle('lock')
            this.getData()
          } else {
            this.$message.error(`${data.describe}，错误码：${data.result}`)
          }
        },
        error => {
          throw error
        }
      )
    },
    cancle(mode) {
      this.visible.staff[mode] = false
      Object.keys(this.form.staff[mode]).forEach(key => {
        if (key === 'frozen') {
          this.form.staff[mode][key] = false
        } else {
          this.form.staff[mode][key] = ''
        }
      })
    },
    // 选择公司点击
    selectCompanyClick() {
      this.visible.selectCompany = true
    },
    // 选择公司对话框打开事件
    selectCompanyOpen() {
      this.companysPage = 1
    },
    queryCompany__() {
      this.companysPage = 1
      this.companys = []
      this.queryCompany_()
    },
    // 查询公司
    async queryCompany_() {
      let req = { pageIndex: this.companysPage, pageSize: 10 }
      req[this.query.query_type] = this.query.query_txt
      let res = await queryCompany(req, this.query.query_type)
      if (res.result == 0) {
        let companyList = res.resultContent.companyList
        if (companyList.length) {
          this.companys.push(...companyList)
          this.companysPage++
        } else {
          this.$message.success('最新内容')
        }
      }
    },
    companysQuery() {
      this.queryCompany_()
    },
    // 公司表格单击
    companysRowClick(row, column, event) {
      this.selectCompanysItem = row
    },
    // 确认选择的公司
    confirmSelectCompany() {
      if (this.selectCompanysItem) {
        this.form.staff.add.companyName = this.selectCompanysItem.companyName
        this.form.staff.add.companyId = this.selectCompanysItem.id
        this.form.staff.mod.companyName = this.selectCompanysItem.companyName
        this.form.staff.mod.companyId = this.selectCompanysItem.id
      }
      this.visible.selectCompany = false
    },
  },
  mounted() {
    this.getData()
  },
}
</script>

<style lang="scss" scoped>
#Project {
  width: 100%;
  height: 100%;
  overflow: hidden;

  .filter {
    width: 100%;
    height: 65px;
    overflow: hidden;
    overflow-x: auto;
  }

  .list {
    width: 100%;
    height: calc(100% - 65px);
    overflow: hidden;

    .title {
      width: 100%;
      height: 50px;
      font-size: 24px;
    }

    .table {
      width: 100%;
      height: calc(100% - 100px);
      overflow: hidden;
      overflow-y: auto;
    }

    .pagination {
      width: 100%;
      height: 50px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
  }
}
.infinite-list {
  max-height: 400px;
  overflow-y: auto;
  .infinite-list-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50px;
    background: rgb(239, 244, 253);
    margin-bottom: 10px;
  }
}
</style>
